<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
		<link rel="stylesheet" href="css/jquery.pagination.css" />
		<style>
			.unShow{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>
				<div th:replace="commons/u-admin-bar::#navbar"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='messages',newMessageCount=${newMessageCount})"></div>

				<div class="main-content">
					<section class="section">
						<h1 class="section-header">
							<div><i class="ion ion-chatbox-working"></i> 消息中心</div>
						</h1>
						<div class="row">
							<div class="col-12 col-sm-12 col-lg-12">
								<div class="card">
									<div class="card-body">
										<ul class="nav nav-tabs" id="myTab" role="tablist">
											<li class="nav-item">
												<a th:class="${cur == 'new'?'nav-link active':'nav-link'}" id="new-message-tab" data-toggle="tab" href="#new-message" role="tab" aria-controls="new-message" aria-selected="true">最新消息</a>
											</li>
											<li class="nav-item">
												<a  th:class="${cur == 'reply'?'nav-link active':'nav-link'}" id="reply-me-tab" data-toggle="tab" href="#reply-me" role="tab" aria-controls="reply-me" aria-selected="false">回复我的</a>
											</li>
											<li class="nav-item">
												<a  th:class="${cur == 'like'?'nav-link active':'nav-link'}" id="like-tab" data-toggle="tab" href="#like" role="tab" aria-controls="like" aria-selected="false">收到的赞</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" id="call-me-tab" data-toggle="tab" href="#call-me" role="tab" aria-controls="call-me" aria-selected="false">@ 我的</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" id="system-message-tab" data-toggle="tab" href="#system-message" role="tab" aria-controls="system-message" aria-selected="false">系统通知</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" id="comments-tab" data-toggle="tab" href="#comments" role="tab" aria-controls="comments" aria-selected="false">评论管理</a>
											</li>
										</ul>
										<div class="tab-content" id="myTabContent">
											<div th:class="${cur == 'new'?'tab-pane fade show active':'tab-pane fade'}" id="new-message" role="tabpanel" aria-labelledby="new-message-tab">
												<div class="row">
													<div class="col-12 col-md-12 col-lg-12">
														<div class="card" th:if="${newMessages.size() > 0}">
															<div class="card-header">
																<a href="read-all-messages" class="btn btn-success"><i class="ion ion-eye"></i> 设为已读</a>
															</div>
															<div class="card-body">
																<ul class="list-unstyled list-unstyled-border">
																	<li th:each="m:${newMessages}" class="media">
																		<img class="mr-3 rounded-circle" width="50"  th:src="${m.fromUser.imagePath}" alt="avatar">
																		<div class="media-body">
																			<div class="media-title" th:text="${m.fromUser.userName}"></div>
																			<small th:if="${m.message.getArticleLikeId() != -1}" >
																				点赞了你的 《<b th:text="${m.articleTitle}"></b>》
																				<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
																				<a th:href="@{/delete-message(id=${m.message.getMessageId()})}">删除</a>
																				<a th:href="@{/read-article(uId=${session.loginUser.userId},uName=${session.loginUser.userName},aId=${m.message.articleId},title=${m.articleTitle})}">查看</a>
																			</small>
																			<small th:if="${m.message.getArticleCommentId() != -1}" >
																				评论了 《<b th:text="${m.articleTitle}"></b>》
																				内容如下： <b th:text="${m.commentContent}"></b>
																				<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
																				<a th:href="@{/delete-message(id=${m.message.getMessageId()})}">删除</a>
																				<a th:href="@{/read-article(uId=${session.loginUser.userId},uName=${session.loginUser.userName},aId=${m.message.articleId},title=${m.articleTitle})}">查看</a>
																			</small>
																			<small th:if="${m.message.getFollowId() != -1}" >
																				关注了你
																				<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
																				<a th:href="@{/delete-message(id=${m.message.getMessageId()})}">删除</a>
																				<a th:href="@{/read-article(uId=${session.loginUser.userId},uName=${session.loginUser.userName},aId=${m.message.articleId},title=${m.articleTitle})}">查看</a>
																			</small>
																		</div>
																	</li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div th:class="${cur == 'reply'?'tab-pane fade show active':'tab-pane fade'}" id="reply-me" role="tabpanel" aria-labelledby="reply-me-tab">
												<div class="row">
													<div class="col-12 col-md-12 col-lg-12">
														<div class="card">
															<div class="card-body">
																<li th:each="m:${allMessages}" class="media" th:if="${m.message.getArticleCommentId() != -1}">
																	<img class="mr-3 rounded-circle" width="50"  th:src="${m.fromUser.imagePath}" alt="avatar">
																	<div class="media-body">
																		<div class="media-title" th:text="${m.fromUser.userName}"></div>
																		<small>
																			评论了 《<b th:text="${m.articleTitle}"></b>》
																			内容如下： <b th:text="${m.commentContent}"></b>
																			<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
																			<a th:href="@{/delete-message(id=${m.message.getMessageId()},cur='reply')}">删除</a>
																			<a th:href="@{/read-article(uId=${session.loginUser.userId},uName=${session.loginUser.userName},aId=${m.message.articleId},title=${m.articleTitle})}">查看</a>
																		</small>
																	</div>
																</li>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div th:class="${cur == 'like'?'tab-pane fade show active':'tab-pane fade'}" id="like" role="tabpanel" aria-labelledby="like-tab">
												<div class="row">
													<div class="col-12 col-md-12 col-lg-12">
														<div class="card">
															<div class="card-body">
																<li th:each="m:${allMessages}" class="media" th:if="${m.message.getArticleLikeId() != -1}">
																	<img class="mr-3 rounded-circle" width="50"  th:src="${m.fromUser.imagePath}" alt="avatar">
																	<div class="media-body">
																		<div class="media-title" th:text="${m.fromUser.userName}"></div>
																		<small>
																			点赞了你的 《<b th:text="${m.articleTitle}"></b>》
																			<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
																			<a th:href="@{/delete-message(id=${m.message.getMessageId()},cur='like')}">删除</a>
																			<a th:href="@{/read-article(uId=${session.loginUser.userId},uName=${session.loginUser.userName},aId=${m.message.articleId},title=${m.articleTitle})}">查看</a>
																		</small>
																	</div>
																</li>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane fade" id="call-me" role="tabpanel" aria-labelledby="call-me-tab">
												@我的
											</div>
											<div class="tab-pane fade" id="system-message" role="tabpanel" aria-labelledby="system-message-tab">
												系统通知
											</div>
											<div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">
												评论管理
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
				<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>

		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>

		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
	</body>
</html>
